<template>
	<!-- 人脉资源 -->
	<view class="page-two-list">
		<!-- 广告位 -->
		<view class="advertising">
			<swiper class="ad-swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item, index) in advertising" :key="index">
					<image :src="item" mode="scaleToFill" style="width: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="page-two-main">
			<!-- 筛选 -->
			<view class="filter-bar">
				<view class="filter-bar-right" style="margin-left: 0;">
					<input class="filter-input" placeholder="请输入地址进行模糊搜索"
						v-model="searchQuery" @change="handleSearch" />
					<image class="search-icon" src="/static/images/search_icon.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="rmzy-tab1">
				<view class="rmzy-tab-item" v-for="(item, index) in tabData" :key="index"
					:class="active == index?'rmzy-tab-item-hov':''" @click="tabClass(item, index)">
					{{item.text}}
				</view>
			</view>

			<!-- 人脉资源 -->
			<template v-if="active === 0">
				<!-- 下拉刷新容器 -->
				<scroll-view 
					class="scroll-container" 
					scroll-y="true" 
					refresher-enabled="true"
					:refresher-triggered="refreshing"
					@refresherrefresh="onRefresh"
					@scrolltolower="onLoadMore"
				>
					<!-- 添加加载动画 -->
					<uni-load-more v-if="loading && rmzyPageNum === 1" status="loading"></uni-load-more>
					
					<view v-if="!loading && rmzyData.length > 0" class="content">
						<rmzy :rmzyData="rmzyData"></rmzy>
					</view>
					
					<!-- 暂无数据显示 -->
					<view class="zwxx-img" v-if="!loading && rmzyData.length === 0 && rmzyPageNum === 1">
						<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/zwxx.png" mode="widthFix"></image>
						<view>暂无数据</view>
					</view>
					
					<!-- 加载更多状态 -->
					<uni-load-more 
						v-if="rmzyData.length > 0" 
						:status="rmzyLoadMoreStatus"
						:content-text="loadMoreText"
					></uni-load-more>
				</scroll-view>
			</template>

			<!-- 人才自荐 -->
			<template v-if="active === 1">
				<!-- 下拉刷新容器 -->
				<scroll-view 
					class="scroll-container" 
					scroll-y="true" 
					refresher-enabled="true"
					:refresher-triggered="refreshing"
					@refresherrefresh="onRefresh"
					@scrolltolower="onLoadMore"
				>
					<!-- 添加加载动画 -->
					<uni-load-more v-if="loading && rczjPageNum === 1" status="loading"></uni-load-more>
					
					<view v-if="!loading && rczjData.length > 0" class="content">
						<rczj :rmzyTitle=false :rczjData="rczjData"></rczj>
					</view>
					
					<!-- 暂无数据显示 -->
					<view class="zwxx-img" v-if="!loading && rczjData.length === 0 && rczjPageNum === 1">
						<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/zwxx.png" mode="widthFix"></image>
						<view>暂无数据</view>
					</view>
					
					<!-- 加载更多状态 -->
					<uni-load-more 
						v-if="rczjData.length > 0" 
						:status="rczjLoadMoreStatus"
						:content-text="loadMoreText"
					></uni-load-more>
				</scroll-view>
			</template>

		</view>
	</view>
</template>

<script>
	import Rmzy from '../../components/Rmzy.vue'; // 人脉资源
	import Rczj from '../../components/Rczj.vue'; // 人才自荐
	export default {
		components: {
			Rmzy,
			Rczj
		},
		data() {
			return {
				loading: false, // 添加loading状态
				refreshing: false, // 下拉刷新状态
				searchQuery: '', // 搜索内容
				advertising: [],
				active: 0,
				tabData: [{
					"text": "人脉资源"
				}, {
					"text": "人才自荐"
				}],
				// 人脉资源
				rmzyData: [],
				originalRmzyData: [],
				// 人才自荐
				rczjData: [],
				originalRczjData: [],
				// 人脉资源分页相关
				rmzyPageNum: 1,
				rmzyPageSize: 10,
				rmzyHasMore: true,
				rmzyLoadMoreStatus: 'more', // 加载更多状态：more-加载前、loading-加载中、noMore-没有更多了
				// 人才自荐分页相关
				rczjPageNum: 1,
				rczjPageSize: 10,
				rczjHasMore: true,
				rczjLoadMoreStatus: 'more', // 加载更多状态：more-加载前、loading-加载中、noMore-没有更多了
				// 搜索相关
				searchTimer: null // 搜索防抖定时器
			}
		},
		computed: {
			loadMoreText() {
				return {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			}
		},
		onLoad() {
			this.getMenberInfo() // 获取会员用户-人脉资源
			this.getReleaseGetInfoZj() // 获取人才自荐
			this.getBannerList() // 获取广告位
		},
		methods: {
			// 获取广告位
			async getBannerList() {
				const res = await this.$api.getBannerList()
				if (res.succ) {
					// 查找zsggw等于"人脉资源"的项
					const targetBanner = res.data.find(item => item.zsggw === '人脉资源')
					// 如果找到匹配项，则使用其tpList值，否则保持默认值
					this.advertising = targetBanner ? targetBanner.tpList : ['https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/banner1.png']
				}
			},
			// 获取会员用户-人脉资源
			async getMenberInfo(isLoadMore = false) {
				if (isLoadMore) {
					this.rmzyLoadMoreStatus = 'loading'
				} else {
					this.loading = true
				}
				try {
					let data = {
						key: '',
						pageNum: this.rmzyPageNum,
						pageSize: this.rmzyPageSize
					}
					const res = await this.$api.getMenberInfo(data)
					console.log('会员用户-人脉资源', res)
					if (res.succ) {
						const newData = res.data.filter(item => item.avatar !== null && item.workYear !== null)
						
						if (isLoadMore) {
							// 加载更多：追加数据
							this.rmzyData = [...this.rmzyData, ...newData]
						} else {
							// 首次加载或刷新：替换数据
							this.originalRmzyData = newData
							this.rmzyData = [...this.originalRmzyData]
						}
						
						// 使用API返回的分页信息判断是否还有更多数据
						const totalPages = res.pages || res.totalPage || 1
						this.rmzyHasMore = this.rmzyPageNum < totalPages
						this.rmzyLoadMoreStatus = this.rmzyHasMore ? 'more' : 'noMore'
						
						// 如果有搜索关键词，进行筛选
						if (this.searchQuery) {
							this.handleSearch()
						}
					}
				} catch (error) {
					console.error('获取人脉资源失败:', error)
					// 显示错误提示
					uni.showToast({
						title: '获取数据失败',
						icon: 'none',
						duration: 2000
					})
					this.rmzyLoadMoreStatus = 'more'
				} finally {
					this.loading = false
					this.refreshing = false
				}
			},
			// 获取人才自荐
			async getReleaseGetInfoZj(isLoadMore = false) {
				if (isLoadMore) {
					this.rczjLoadMoreStatus = 'loading'
				} else {
					this.loading = true
				}
				try {
					let data = {
						key: '',
						pageNum: this.rczjPageNum,
						pageSize: this.rczjPageSize
					}
					const res = await this.$api.getReleaseGetInfoZj(data)
					console.log('人才自荐', res)
					if (res.succ) {
						const newData = res.data.sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
						
						if (isLoadMore) {
							// 加载更多：追加数据
							this.rczjData = [...this.rczjData, ...newData]
						} else {
							// 首次加载或刷新：替换数据
							this.originalRczjData = newData
							this.rczjData = [...this.originalRczjData]
						}
						
						// 使用API返回的分页信息判断是否还有更多数据
						const totalPages = res.pages || res.totalPage || 1
						this.rczjHasMore = this.rczjPageNum < totalPages
						this.rczjLoadMoreStatus = this.rczjHasMore ? 'more' : 'noMore'
						
						// 如果有搜索关键词，进行筛选
						if (this.searchQuery) {
							this.handleSearch()
						}
					}
				} catch (error) {
					console.error('获取人才自荐失败:', error)
					// 显示错误提示
					uni.showToast({
						title: '获取数据失败',
						icon: 'none',
						duration: 2000
					})
					this.rczjLoadMoreStatus = 'more'
				} finally {
					this.loading = false
					this.refreshing = false
				}
			},
			// 下拉刷新
			async onRefresh() {
				this.refreshing = true
				if (this.active === 0) {
					this.rmzyPageNum = 1
					this.rmzyHasMore = true
					this.rmzyLoadMoreStatus = 'more'
					await this.getMenberInfo()
				} else {
					this.rczjPageNum = 1
					this.rczjHasMore = true
					this.rczjLoadMoreStatus = 'more'
					await this.getReleaseGetInfoZj()
				}
			},
			// 加载更多
			async onLoadMore() {
				if (this.active === 0) {
					// 人脉资源加载更多
					if (!this.rmzyHasMore || this.rmzyLoadMoreStatus === 'loading') {
						return
					}
					this.rmzyPageNum++
					await this.getMenberInfo(true)
				} else {
					// 人才自荐加载更多
					if (!this.rczjHasMore || this.rczjLoadMoreStatus === 'loading') {
						return
					}
					this.rczjPageNum++
					await this.getReleaseGetInfoZj(true)
				}
			},
			// 地址搜索
			handleSearch() {
				// 清除之前的定时器
				if (this.searchTimer) {
					clearTimeout(this.searchTimer)
				}
				
				// 设置新的定时器，500ms后执行搜索
				this.searchTimer = setTimeout(() => {
					this.performSearch()
				}, 500)
			},
			// 执行搜索
			async performSearch() {
				const query = this.searchQuery.toLowerCase()
				
				if (this.active === 0) {
					// 人脉资源搜索
					if (query === '') {
						// 如果搜索框为空，显示所有数据
						this.rmzyData = [...this.originalRmzyData]
					} else {
						this.rmzyData = this.originalRmzyData.filter(item => 
							item.address && item.address.toLowerCase().includes(query)
						)
					}
				} else {
					// 人才自荐搜索
					if (query === '') {
						// 如果搜索框为空，显示所有数据
						this.rczjData = [...this.originalRczjData]
					} else {
						this.rczjData = this.originalRczjData.filter(item => 
							item.member && item.member.address && item.member.address.toLowerCase().includes(query)
						)
					}
				}
			},
			// tab切换
			tabClass(i, index) {
				this.active = index
				if (index === 0) {
					// 切换到人脉资源
					this.rmzyPageNum = 1
					this.rmzyHasMore = true
					this.rmzyLoadMoreStatus = 'more'
					this.getMenberInfo()
				} else {
					// 切换到人才自荐
					this.rczjPageNum = 1
					this.rczjHasMore = true
					this.rczjLoadMoreStatus = 'more'
					this.getReleaseGetInfoZj()
				}
			}
		}
	}
</script>

<style lang="less">
	.scroll-container {
		width: 100%;
		flex: 1;
		overflow: auto;
	}

	.zwxx-img {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;

		image {
			width: 320rpx;
			margin-bottom: 20rpx;
		}

		view {
			color: #999;
			font-size: 28rpx;
		}
	}

	.page-two-list {
		.advertising {
			margin: 30rpx 30rpx 0;
			padding: 0;
			border-radius: 12rpx;

			.ad-swiper {
				width: 100%;
				height: 300rpx;
				border-radius: 12rpx;
			}

			.ad-swiper swiper-item {
				width: 100%;
				height: 100%;
			}

			.ad-swiper swiper-item image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}
	}
</style>